<script lang="ts" setup>
import { onMounted } from "vue";
import { calcPointerRotateRad, drawDial, drawPointer } from "../tools";

onMounted(() => {
  const canvas = document.getElementById("canvas") as any;
  const ctx = canvas.getContext("2d");
  const size: number = 250;

  setInterval(() => {
    ctx.save(); // 保存状态
    ctx.clearRect(0, 0, size, size); // 清除画布
    ctx.translate(size / 2, size / 2); // 设置中心点
    ctx.save();

    drawDial(ctx, size);

    const { hourPointerRad, minutePointerRad, secondPointerRad } =
      calcPointerRotateRad(new Date());

    // 时针
    drawPointer(ctx, hourPointerRad, size, 5);

    // 分针
    drawPointer(ctx, minutePointerRad, size, 3);

    // 秒针
    drawPointer(ctx, secondPointerRad, size, 1, "red");

    ctx.restore();
    ctx.restore();
  }, 1000);
});
</script>

<template lang="pug">
.Dial
  canvas#canvas(:width="250" :height="250")
</template>

<style lang="less" scoped>
.Dial {
  display: flex;
  justify-content: center;

  canvas {
    margin: 50px;
  }
}
</style>
